<script lang="ts" setup>
import BackToTop from './components/BackToTop.vue'
import Footer from './components/footer.vue'
import Search from './components/Search.vue'
import { h, Component, watch, ref, onMounted } from "vue";
import { NIcon, NEllipsis, NModal, MenuInst, NInput, darkTheme, DrawerPlacement } from "naive-ui";
import type { MenuOption } from "naive-ui";
import { RouterLink } from "vue-router";
import { setTheme } from './utils'


import {
  LaptopOutline as WorkIcon,
  LogOutOutline as HomeIcon,
} from "@vicons/ionicons5";


function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

let selectNav = ref<boolean>(true)
const menuList = ref<MenuInst | null>(null)
const menuOptions: MenuOption[] = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: '/'
          },
        },
        { default: () => "Home" }
      ),
    key: "home",
    icon: renderIcon(HomeIcon),
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/docs",
          },
        },
        { default: () => "Docs" }
      ),
    key: "docs",
    icon: renderIcon(WorkIcon),
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/archives",
          },
        },
        { default: () => "Archives" }
      ),
    key: "archives",
    icon: renderIcon(WorkIcon),
  },
  {
    label: () =>
      h(
        NEllipsis,
        null,
        { default: () => "search" }
      ),
    key: "search",
    icon: renderIcon(WorkIcon),
  },
];
let menuValue = ref(menuOptions[0]?.key)
const showModal = ref<boolean>(false)
let isDark = ref<boolean>(false)
const active = ref(false)
const placement = ref<DrawerPlacement>('right')

let oldMenu
watch(menuValue, (newval, oldval) => {
  if (newval == 'search') {
    showModal.value = true
    oldMenu = oldval
  }
})

onMounted(() => {
  selectTheme('light')
})

const afterLeave = () => {
  menuValue.value = oldMenu
  menuList.value?.showOption(oldMenu)
}

const closeHandler = () => {
  showModal.value = false
}

const selectTheme = (themeType: string) => {
  themeType == 'dark' ? setTheme(false) : setTheme(true)
  isDark.value = themeType == 'dark' ? true : false
}

const menuHandle = () => {
  active.value = !active.value;
  placement.value = 'top';
}
</script>

<template>
  <n-config-provider :theme="isDark ? darkTheme : undefined">
    <div class="app">
      <div class="main">
        <div class="left pc">
          <div class="menu">
            <h2 style="margin: 10px 0;">NexT</h2>
            <h4 style="margin: 10px 0;">Theme for Hexo</h4>
            <n-menu :options="menuOptions" ref="menuList" style="width: 100%" v-model:value="menuValue" />
            <n-modal @after-leave="afterLeave" v-model:show="showModal">
              <div>
                <search @close="closeHandler"></search>
              </div>
            </n-modal>
          </div>
          <div class="sidebar-inner">
            <ul class="sidebar-nav">
              <li class="sidebar-nav-toc" :class="selectNav ? 'active-border' : ''" @click="selectNav = true">Table of
                Contents</li>
              <li class="sidebar-nav-overview" :class="!selectNav ? 'active-border' : ''" @click="selectNav = false">
                Overview</li>
            </ul>
            <div class="sidebar-panel-container">
              <ol v-if="selectNav">
                <li>
                  <a href="javascript:;"><span class="active-border">1.Hexo Plugins</span></a>
                </li>
                <li>
                  <a href="javascript:;"><span>2.NexT Plugins</span></a>
                </li>
              </ol>
              <div class="select-btn" v-if="!selectNav">
                <n-space>
                  <n-button-group>
                    <n-button round @click="selectTheme('light')">
                      light
                    </n-button>
                    <n-button round @click="selectTheme('dark')">
                      dark
                    </n-button>
                  </n-button-group>
                </n-space>
              </div>
            </div>

          </div>
        </div>
        <div class=" phone">
          <div class="phone-menu">
            <div @click="menuHandle">
              <n-icon size="30">
                <work-icon></work-icon>
              </n-icon>
            </div>
            <div style="flex:1;text-align: center;">
              <h2 style="margin: 10px 0;">NexT</h2>
              <h4 style="margin: 10px 0;">Theme for Hexo</h4>
            </div>
            <div>
              <n-icon size="30">
                <home-icon></home-icon>
              </n-icon>
            </div>
          </div>
          <div v-show="active" id="drawer-target" style="
                position: relative;
                width: 100%;
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
              ">
              <n-menu :options="menuOptions" ref="menuList" style="width: 100%" v-model:value="menuValue" />
          </div>
        </div>
        <router-view class="router"></router-view>
      </div>
      <back-to-top></back-to-top>
      <Footer></Footer>
    </div>
  </n-config-provider>
</template>

<style scoped lang="scss">
.app {
  background-color: var(--theme-bg);
  transition: all .3s;
  color: var(--themt-text-color);
}

.main {
  width: calc(100% - 20px);
  display: block;
  margin: 0 auto;

  .left {
    margin-right: 10px;
    width: 240px;
    display: none;
  }
}



.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--theme-content-color);

  ::v-deep .n-menu-item-content::before {
    left: 0;
    right: 0;
  }
}

.sidebar-inner {
  margin-top: 10px;
  padding: 20px 10px;
  background-color: var(--theme-content-color);
  position: sticky;
  top: 12px;

  .sidebar-nav {
    display: flex;
    justify-content: space-around;

    li {
      cursor: pointer;
    }
  }

  .sidebar-panel-container {
    margin-top: 10px;

    ol {
      li {
        line-height: 180%;
      }
    }

    .select-btn {
      display: flex;
    }
  }
}

.active-border {
  border-bottom: 1px solid #fc6423;
  color: #fc6423;
}

.router {
  flex: 1
}

.pc {
  display: none;
}

.phone {
  display: block;
}

.phone-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

@media (min-width: 1200px) {
  .phone {
    display: none;
  }

  .pc {
    display: block !important;
  }

  .main {
    display: flex;
    width: 1160px;

    .left {}
  }
}
</style>
